<!--
 * @Author: 刘程琳 2796055305@qq.com
 * @Date: 2025-09-24 17:22:44
 * @LastEditors: 刘程琳 2796055305@qq.com
 * @LastEditTime: 2025-09-28 17:11:29
 * @FilePath: \23信算前端\Day19\vue-admin-template\src\views\form\details.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 外层容器：控制整个页面背景 -->
  <div class="page-container">
    <el-page-header @back="$router.go(-1)" content="工程详情"></el-page-header>

    <!-- 标题栏：修改为粉紫色背景 -->
    <div class="top" style="margin-bottom: 10px; margin-top: 15px; height: 40px; width: 100%; background-color: #e6a8d7; line-height: 40px; padding-left: 15px; color: #fff; font-weight: 500;">
      工程信息
    </div>

    <!-- 工程信息：新增表单容器，设置浅粉紫背景 -->
    <div class="form-container">
      <el-col :span="12">
        <el-form>
          <el-form-item style="padding-left: 10%;" label="工程名称">{{ engDetails.engineer_name }}</el-form-item>
        </el-form>
        <el-form>
          <el-form-item style="padding-left: 10%;" label="工程类型">{{ engDetails.type }}</el-form-item>
        </el-form>
        <el-form>
          <el-form-item style="padding-left: 10%;" label="设备号">{{ engDetails.engineer_id }}</el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <el-form>
          <el-form-item style="padding-left: 10%;" label="工单名称">{{ engDetails.device_name }}</el-form-item>
        </el-form>
        <el-form>
          <el-form-item style="padding-left: 10%;" label="状态">{{ engDetails.status }}</el-form-item>
        </el-form>
      </el-col>
    </div>
  </div>
</template>
<script>
// 引入请求方法（原代码未引入，补充以避免报错）
import { get } from '@/utils/request'
export default {
  data() {
    return {
      engDetails: {},
      // 补充params参数（原getEngData方法使用但未定义，避免报错）
      params: { page: 1, pageSize: 10 }
    }
  },
  methods: {
    async getEngData() {
      let res = await get('/engineer/pageQuery', this.params);
      console.log(res, '获取响应');
      // 原代码未定义engData和total，补充定义或注释（此处注释避免报错，可根据实际需求调整）
      // this.engData = res.data.list;
      // this.total = res.data.total;
    }
  },
  created() {
    this.getEngData();
    this.engDetails = this.$route.query;
  }
}
</script>
<style lang="scss" scoped>
// 1. 页面整体背景（浅粉紫，覆盖全屏）
.page-container {
  background-color: #f9eaf2;
  min-height: 100vh;
  padding: 20px;
}

// // 2. 表单容器背景（更浅的粉紫，区分表单区域与页面背景）
// .form-container {
//   background-color: #f5d9ea;
//   padding: 20px;
//   border-radius: 8px;
// }

// 3. 优化表单标签样式（与粉紫色系协调）
::v-deep .el-form-item__label {
  color: #9d658f;
  font-weight: 500;
}

// 原有样式保留（按需调整）
::v-deep .el-link--inner {
  margin-left: 5px;
}

.input {
  width: 280px;
}

.select {
  width: 280px;
}

.demo-drawer__footer {
  border-top: 1px solid #ececec;
  padding-top: 10px;
  position: fixed;
  bottom: 50px;
  width: 50%;
  text-align: center;
}
</style>